import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import '../../../app_files.dart';
import '../widget/config_result_widget.dart';
import 'action.dart';
import 'state.dart';
import 'dart:io';

const double kOrderImageWidth = 90;

Widget buildView(
    OrderResultViewState state, Dispatch dispatch, ViewService viewService) {
  Widget _infoWidget() => Container(
        padding: EdgeInsets.only(left: 15, right: 15, bottom: 8),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
                bottom: BorderSide(color: ThemeConfig.separeColor, width: 10))),
        child: Column(
          children: [
            Container(
              height: 44,
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  '客户信息',
                  style: TextThemeConfig.Font16WithColorBold22,
                ),
              ),
              margin: EdgeInsets.only(bottom: 4),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: 85,
                    child: Text(
                      '客户姓名',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Expanded(
                    child: Text(
                      state.userInfo.userName,
                      style: TextThemeConfig.Font14WithColor22,
                    ),
                  )
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 6),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: 85,
                    child: Text(
                      '客户地址',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Expanded(
                    child: Text(
                      state.userInfo.userAddress,
                      style: TextThemeConfig.Font14WithColor22,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5),
              child: Row(
                children: [
                  Container(
                    width: 85,
                    child: Text(
                      '联系方式',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Text(
                    state.userInfo.phone,
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 5),
              child: Row(
                children: [
                  Container(
                    width: 85,
                    child: Text(
                      '表号',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Text(
                    state.userInfo.meterNo,
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                ],
              ),
            ),
          ],
        ),
      );

  Widget _gasWidget() => Container(
        padding: EdgeInsets.only(left: 15, right: 15, bottom: 8),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
                bottom: BorderSide(color: ThemeConfig.separeColor, width: 10))),
        child: Column(
          children: [
            Container(
              height: 44,
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  '用气信息',
                  style: TextThemeConfig.Font16WithColorBold22,
                ),
              ),
              margin: EdgeInsets.only(bottom: 4),
            ),
            Container(
              height: 35,
              child: Row(
                children: [
                  Container(
                    width: 123,
                    child: Text(
                      state.userInfo.isICGasUser ? '总购气量(m³)' : '总充值金额(元)',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Text(
                    state.gasInfo.gasBuyTotalStr,
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                ],
              ),
            ),
            Container(
              height: 35,
              child: Row(
                children: [
                  Container(
                    width: 123,
                    child: Text(
                      state.userInfo.isICGasUser ? '当前表底(m³)' : '最后抄表指针',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Text(
                    state.gasInfo.gasUseTotalStr,
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                ],
              ),
            ),
            Container(
              height: 35,
              child: Row(
                children: [
                  Container(
                    width: 123,
                    child: Text(
                      state.userInfo.isICGasUser ? '剩余气量(m³)' : '账户余额(元)',
                      style: TextThemeConfig.Font14WithColor66,
                    ),
                  ),
                  Text(
                    state.gasInfo.gasRemainTotalStr,
                    style: TextThemeConfig.Font14WithColor22,
                  ),
                ],
              ),
            ),
          ],
        ),
      );

  Widget _orderResultWidget() {
    return ConfigResultWidget(state.items, dispatch);
  }

  Widget _orderStatusWidget() {
    List<String> titles = ['正常', '自修', '隐患', '维修'];
    Widget _button(int index, String text) => InkWell(
          child: Container(
            width: 80,
            height: 30,
            margin: EdgeInsets.only(right: 20, bottom: 20),
            decoration: BoxDecoration(
              color: state.orderStatus == index + 1
                  ? Color(0xffE6EEFF)
                  : Color(0xfff5f5f5),
              borderRadius: BorderRadius.all(Radius.circular(4)),
            ),
            child: Align(
              child: Text(
                text,
                style: state.orderStatus == index + 1
                    ? TextThemeConfig.Font13WithColorblue
                    : TextThemeConfig.Font13WithColor66,
              ),
            ),
          ),
          onTap: () {
            if (!state.isDetail) {
              dispatch(OrderResultViewActionCreator.onTapStatus(index));
            }
          },
        );
    List<Widget> items = [];
    if (state.isNormal) {
      items.add(_button(0, '正常'));
    } else {
      for (int i = 1; i < 4; ++i) {
        items.add(_button(i, titles[i]));
      }
    }

    return Container(
      padding: EdgeInsets.only(left: 15, right: 15),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
              bottom: BorderSide(color: ThemeConfig.separeColor, width: 10))),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 44,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                '安检结果',
                style: TextThemeConfig.Font16WithColorBold22,
              ),
            ),
            margin: EdgeInsets.only(bottom: 4),
          ),
          Container(
            child: Row(
              children: state.isDetail
                  ? [
                      Padding(
                        padding: EdgeInsets.only(bottom: 12),
                        child: Text(
                          titles[state.orderStatus - 1],
                          style: TextThemeConfig.Font13WithColor22,
                        ),
                      )
                    ]
                  : items,
            ),
          ),
        ],
      ),
    );
  }

  Widget _orderPhotoWidget() {
    return Container(
      padding: EdgeInsets.only(left: 15, right: 15),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
              bottom: BorderSide(color: ThemeConfig.separeColor, width: 10))),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 44,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                '拍照留存',
                style: TextThemeConfig.Font16WithColorBold22,
              ),
            ),
            margin: EdgeInsets.only(bottom: 4),
          ),
          Container(
            margin: EdgeInsets.only(bottom: 12),
            height: kOrderImageWidth,
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                if (index == state.orderPhoto.length) {
                  return InkWell(
                    child: Container(
                      margin: EdgeInsets.only(right: 12),
                      width: kOrderImageWidth,
                      height: kOrderImageWidth,
                      color: Color(0xffF5F5F5),
                      child: Align(
                        child: Image.asset('images/icon_camera.png'),
                      ),
                    ),
                    onTap: () =>
                        dispatch(OrderResultViewActionCreator.onTapAddPic()),
                  );
                } else {
                  var file = state.orderPhoto[index];
                  return InkWell(
                    child: Container(
                      margin: EdgeInsets.only(right: 12),
                      child: file is File
                          ? Image(
                              image: FileImageEx(file),
                              width: kOrderImageWidth,
                              height: kOrderImageWidth,
                              fit: BoxFit.fill,
                            )
                          : CustomImage(
                              file,
                              fit: BoxFit.fill,
                              width: kOrderImageWidth,
                              height: kOrderImageWidth,
                            ),
                    ),
                    onTap: () =>
                        dispatch(OrderResultViewActionCreator.onTapPic(file)),
                  );
                }
              },
              itemCount: state.isDetail
                  ? state.orderPhoto.length
                  : state.orderPhoto.length + 1,
              scrollDirection: Axis.horizontal,
              itemExtent: kOrderImageWidth + 12,
              padding: EdgeInsets.only(),
            ),
          )
        ],
      ),
    );
  }

  Widget _confirmButton() {
    if (state.isDetail) return Container();
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 15, vertical: 40),
      height: 50,
      decoration: BoxDecoration(
        color: ThemeConfig.mainColor,
        borderRadius: BorderRadius.all(Radius.circular(4)),
      ),
      child: InkWell(
        child: Align(
          child: Text(
            state.orderSignPhoto == null ? '确认无误去签名' : '提交工单',
            style: TextThemeConfig.Font16WithWhite,
          ),
        ),
        onTap: () => dispatch(OrderResultViewActionCreator.onSubmit()),
      ),
    );
  }

  Widget _signPhotoWidget() {
    if (state.orderSignPhoto == null) return Container();
    return Container(
      padding: EdgeInsets.only(left: 15, right: 15),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
              bottom: BorderSide(color: ThemeConfig.separeColor, width: 10))),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 44,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                '电子签名',
                style: TextThemeConfig.Font16WithColorBold22,
              ),
            ),
            margin: EdgeInsets.only(bottom: 4),
          ),
          Container(
            margin: EdgeInsets.only(bottom: 12),
            height: 100,
            width: 175,
            child: InkWell(
              child: Container(
                margin: EdgeInsets.only(right: 12),
                child: state.orderSignPhoto is File
                    ? Image(image: FileImageEx(state.orderSignPhoto))
                    : CustomImage(
                        state.orderSignPhoto,
                        width: 175,
                        height: 100,
                      ),
              ),
              onTap: () => dispatch(OrderResultViewActionCreator.onTapSign()),
            ),
          )
        ],
      ),
    );
  }

  Widget _fixContentWidget() {
    return Container(
      padding: EdgeInsets.only(left: 15, right: 15,bottom: 12),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
              bottom: BorderSide(color: ThemeConfig.separeColor, width: 10))),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            child: Padding(
              padding: EdgeInsets.only(top: 12),
              child: Text(
                '维修记录',
                style: TextThemeConfig.Font16WithColorBold22,
              ),
            ),
          ),
          Container(
            height: 70,
            child: TextField(
              minLines: 1,
              maxLines: 10,
              controller: state.selfFixContentController,
              style: TextThemeConfig.Font13WithColor22,
              enabled: !state.isDetail,
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: "请在此处描述维修记录...",
                hintStyle: TextThemeConfig.Font13WithColor99,
                contentPadding: EdgeInsets.only(),
              ),
              onChanged: (String str) {
                if (str.length > ThemeConfig.descTextLength)
                  state.selfFixContentController.text =
                      str.substring(0, ThemeConfig.descTextLength);
              },
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 20),
            height: 90,
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                if (index == state.repairPhotos.length) {
                  return InkWell(
                    child: Container(
                      margin: EdgeInsets.only(right: 12),
                      width: 90,
                      height: 90,
                      color: Color(0xffF5F5F5),
                      child: Align(
                        child: Image.asset('images/icon_camera.png'),
                      ),
                    ),
                    onTap: () =>
                        dispatch(OrderResultViewActionCreator.onTapAddFixPic()),
                  );
                } else {
                  var file = state.repairPhotos[index];
                  return InkWell(
                    child: Container(
                      margin: EdgeInsets.only(right: 12),
                      width: 90,
                      height: 90,
                      child: file is File
                          ? Image(
                        image: FileImageEx(file),
                        width: kOrderImageWidth,
                        height: kOrderImageWidth,
                        fit: BoxFit.fill,
                      )
                          : CustomImage(
                        file,
                        fit: BoxFit.fill,
                        width: kOrderImageWidth,
                        height: kOrderImageWidth,
                      ) ,
                    ),
                    onTap: () =>
                        dispatch(OrderResultViewActionCreator.onTapFixPic(file)),
                  );
                }
              },
              itemCount: state.isDetail
                  ? state.repairPhotos.length
                  : state.repairPhotos.length + 1,
              scrollDirection: Axis.horizontal,
              itemExtent: 102,
              padding: EdgeInsets.only(),
            ),
          ),
        ],
      ),
    );
  }

  return Scaffold(
    appBar: myAppBar(viewService.context,
        title: state.isDetail ? '工单详情' : '客户确认',
        actions: state.isDetail
            ? [
                GestureDetector(
                  behavior: HitTestBehavior.translucent,
                  child: Image.asset('images/ic_share.png'),
                  onTap: () => CommonUtils.pushRoute(
                      viewService.context, RoutePath.orderResultEditView,
                      arguments: {
                        'info': state.userInfo,
                        'items': state.items,
                        'workerName': state.workerName,
                      }),
                )
              ]
            : null),
    body: SafeArea(
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _infoWidget(),
            state.items == null
                ? Container(
                    height: 500,
                    child: Center(
                      child: MyLoadingWidget(),
                    ),
                  )
                : MyInkWellWidget(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // _gasWidget(),
                  _orderResultWidget(),
                  _orderStatusWidget(),
                  state.orderStatus == 2
                      ? _fixContentWidget()
                      : Container(),
                  _orderPhotoWidget(),
                  _signPhotoWidget(),
                  _confirmButton(),
                ],
              ),
              onTap: ()=> CommonUtils.closeKey(viewService.context),
            )
          ],
        ),
      ),
    ),
  );
}
